<template>
  <div class="app-container">
    <div style="width:70%;">
      <el-form label-width="80px" :model="dataForm" ref="dataForm" :rules="dataRule">
        <el-card class="box-card">
          <div slot="header"><span>首页公告</span></div>
          <el-row>
            <el-col :span="20">
              <el-form-item label="首页公告" prop="notice">
                <el-input type="text" v-model="dataForm.notice" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card">
          <div slot="header"><span>首页轮播图</span>
            <el-button style="float: right; padding: 3px 0" @click="bannerAdd" type="text">添加</el-button>
          </div>
          <el-row>
            <el-table border height="280" :data="banner.itemDetail" style="width:100%">
              <el-table-column prop="name" label="图片信息" width="180" align="center">
                <template slot-scope="scope,index">
                  <upload :path="scope.row.pictureUrl" @imgChange="bannerChange($event,scope.$index)" width="70px" />
                </template>
              </el-table-column>
              <el-table-column prop="name" width="360" label="链接类型" align="center">
                <template slot-scope="scope">
                  <el-radio-group v-model="scope.row.type">
                    <el-radio :label="1">内部链接</el-radio>
                    <el-radio :label="2">外部链接</el-radio>
                    <el-radio :label="3">商品详情</el-radio>
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="链接地址"  align="center">
                <template slot-scope="scope">
                  <el-input v-if="scope.row.type==1||scope.row.type==2" type="text" class="link_input" v-model="scope.row.jumpUrl"></el-input>
                  <el-select class="link_input" v-else-if="scope.row.type==3" v-model="scope.row.jumpUrl" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in goodList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="操作" width="100" align="center">
                <template slot-scope="scope">
                  <el-button type="danger" plain icon="el-icon-delete" size="mini"
                    @click="bannerDelete($event,scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-card>
        <el-card class="box-card">
          <div slot="header"><span>栏目列表</span>
            <el-button style="float: right; padding: 3px 0" @click="addColumn" type="text">添加</el-button>
          </div>
          <el-row v-for="(i,columnIndex) in columnList" :key="columnIndex">
            <el-row :gutter="10">
              <el-col :span="18">
                <el-form-item label="栏目标题" prop="colName">
                  <el-input type="text" v-model="i.name" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-button type="primary" plain icon="el-icon-plus" size=""
                  @click="imgListAdd(columnIndex)">添加明细</el-button>
              </el-col>
              <el-col :span="3">
                <el-button type="danger" plain icon="el-icon-delete" size=""
                  @click="delColumn(columnIndex)">删除栏目</el-button>
              </el-col>
            </el-row>
            <el-table border :data="i.itemDetail" style="width:100%;margin-bottom: 10px;">
              <el-table-column prop="name" label="图片信息" width="180" align="center">
                <template slot-scope="scope,index">
                  <upload :path="scope.row.pictureUrl" @imgChange="imgListChange($event,columnIndex,scope.$index)" width="70px" />
                </template>
              </el-table-column>
              <el-table-column prop="name" width="360" label="链接类型" align="center">
                <template slot-scope="scope">
                  <el-radio-group v-model="scope.row.type">
                    <el-radio :label="1">内部链接</el-radio>
                    <el-radio :label="2">外部链接</el-radio>
                    <el-radio :label="3">商品详情</el-radio>
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="链接地址"  align="center">
                <template slot-scope="scope">
                  <el-input v-if="scope.row.type==1||scope.row.type==2" type="text" class="link_input" v-model="scope.row.jumpUrl"></el-input>
                  <el-select class="link_input" v-else-if="scope.row.type==3" v-model="scope.row.jumpUrl" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in goodList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="操作" width="100" align="center">
                <template slot-scope="scope">
                  <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                    @click="imgListDelete(columnIndex,scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-card>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="onSave">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <phone :notice="dataForm.notice" :banner="banner.itemDetail" :column="columnList" class="phone" />
  </div>
</template>

<script>
  import {
    upload
  } from '@/api/file'
  import {page as selectAllGoods} from '@/api/business/goods/goods'
  import Phone from '@/components/phone/index.vue'
  import {
    update,
    fetchData
  } from "@/api/business/appHome";

  import RichTextBox from '@/components/RichTextBox/index.vue'
  export default {
    components: {
      RichTextBox,
      Phone
    },
    data() {
      return {
        goodList:[],
        dataForm:{
          notice:''
        },
        loading:false,
        banner: {
          itemType: 'CAROUSEL',
          itemDetail: []
        },
        columnList: [],
        imageApi: process.env.VUE_APP_IMAGE_BASE_URL,
        dataRule: {
          notice: [{
            required: true,
            message: '请输入公告内容',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.initPage();
    },
    mounted() {
      this.fetchData();
    },
    methods: {
      changeType(item){
        item.jumpUrl=''
      },
      initPage(){
        selectAllGoods({pageNum:1,pageSize:10000,search:{status:1}}).then(res=>{
           this.goodList=res.data.list
        })
      },
      fetchData() {
        fetchData().then(res => {
          this.dataForm.notice= res.data[0].content;
          this.banner = res.data[1];
          const columnList = res.data;
          columnList.splice(0, 2)
          this.columnList = columnList;
        })
      },

      onSave() {
        this.loading=true
        var data = new Array();
        data.push({
          content: this.dataForm.notice,
          itemType: 'NOTICE'
        });
        data.push(this.banner);
        data = data.concat(this.columnList);
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            update(JSON.stringify(data)).then(res => {
              this.$message.success('保存成功')
            })
          }else{
            console.log('9');
          }
          this.loading =false
        })
      },
      delColumn(i) {
        this.$confirm('确定要删除吗', '提示', {
          type: 'warning'
        }).then(() => {
          this.columnList.splice(i, 1)
        })

      },
      addColumn() {
        this.columnList.push({
          itemDetail: [],
          name: ''
        })
      },
      imgListDelete(i, index) {
        this.$confirm('确定要删除吗', '提示', {
          type: 'warning'
        }).then(() => {
          this.columnList[i].itemDetail.splice(index, 1);
        })
      },
      imgListChange(e, i, index) {
        if (e) {
          this.columnList[i].itemDetail[index].pictureUrl = e;
        } else {
          this.columnList[i].itemDetail.splice(index, 1);
        }
      },
      imgListAdd(i) {
        this.columnList[i].itemDetail.push({
          pictureUrl: '',
          type: 0,
          jumpUrl: ''
        })
      },
      bannerDelete(i) {
        this.$confirm('确定要删除吗', '提示', {
          type: 'warning'
        }).then(() => {
          this.banner.itemDetail.splice(i, 1);
        })
      },
      bannerChange(e, i) {
        if (e) {
          this.banner.itemDetail[i].pictureUrl = e;
        } else {
          this.banner.itemDetail.splice(i, 1);
        }
      },
      bannerAdd() {
        this.banner.itemDetail.push({
          pictureUrl: '',
          type: 0,
          jumpUrl: ''
        })
      }

    }
  }
</script>
<style lang="scss" scoped>
  .app_home {
    display: flex;
  }

  .img_list {
    display: flex;
    align-items: center;

    &>img {
      width: 100px;
      margin-right: 10px;
    }
  }

  .link_input {
    width: 88%;
  }

  .img_item {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
  }

  .handle {
    display: flex;
    margin: 20px 0;
  }

  .input {
    width: 80%;
  }

  .phone {
    position: fixed;
    top: 130px;
    right: 50px;
    z-index: 10;
  }
</style>
